<template>
	<view>
		<nv :config="config"></nv>
		<!-- 中间内容 -->
		<view class="main-content">
			<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
			<mescroll-body ref="mescrollRef" top="20" onScroll:true :up="upOption" @init="mescrollInit"
				@down="downCallback" @up="upCallback">
				<!-- 数据列表 -->
				<view class="project-card cu-card case no-card">
					<view @click="goProject(item.id)" class="cu-item shadow" v-for="(item, index) in projectList"
						:key="index">
						<view class="image">
							<image :src="item.url" mode="widthFix"></image>
						</view>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="margin-lr flex-sub">
									<view class="item-name text-grey text-lg">{{item.title}}</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<tab-bar :currentPage="2"></tab-bar>
	</view>
</template>

<script>
	import {
		getArticleIndex
	} from "@/api/lianai.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				config: {
					title: "恋爱教学",
					color: "#ffffff"
				},
				leftUrl: "/pages/index/index",
				projectList: [],
				upOption: {
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
			}
		},
		// 分享小程序
		onShareAppMessage() {
			return {
				title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
				path: '/pages/project/list'
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
				path: '/pages/project/list'
			}
		},
		methods: {
			//返回上一层
			arrowLeft() {
				console.log("返回上一层")
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			//返回首页
			arrowHome() {
				console.log("返回首页")
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goProject(id) {
				uni.navigateTo({
					url: '/pages/project/detail?proId=' + id
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				var page = {
					num: 1,
					size: 10
				}
				this.upCallback(page);
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				var page = {
					num: 1,
					size: 10
				}
				this.upCallback(page);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('数据加载');
				uni.showLoading({
					title: '加载中'
				});
				getArticleIndex({
					"pageNum": page.num,
					"pageSize": page.size
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.mescroll.endSuccess(res.data.total);
						//设置列表数据
						if (page.num === 1) this.projectList = []; //如果是第一页需手动制空列表
						this.projectList = this.projectList.concat(res.data.records); //追加新数据
					}
				})

			},
		}
	}
</script>
<style scoped>
	.image {
		height: 200px;
	}

	.u-nav-slot {
		display: inline-flex;
		border-radius: 15px;
		border: 1px solid rgb(122 189 255);
		padding: 3px;
	}
</style>
<style lang="scss" scoped>

</style>
